<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>class.upload.php test forms</title>
    <meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8">
    <style>
        p.result {
          margin: 0px;
          padding: 0px;
        }
        fieldset {
          width: 45%;
          margin: 15px 0px 25px 0px;
          padding: 15px;
        }     
        fieldset.left {
          float: left;
          clear: left;
        }     
        fieldset.right {
          float: right;
          clear: right;
        }     
        legend {
          font-weight: bold;
        }
        .button {
          text-align: right;
        }
        .button input {
          font-weight: bold;
        }

        #dnd_drag {
          display: none;
          text-align: center;
          padding: 1em 0;
          margin: 1em 0;
          color: #555;
          border: 2px dashed #888;
          border-radius: 7px;
          cursor: default;
        }
        #dnd_drag.hover {
          border: 2px dashed #000;
        }

        #xhr_status, #dnd_status {
          font-size: 90%;
          font-style: italic;
        }
    </style>

</head>

<body>

    <h1>class.upload.php test forms</h1>

    <fieldset class="left">
        <legend>Simple upload</legend>
        <p>Pick up a file to upload, and press "upload" </p>
        <form name="form1" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="simple" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset class="right">
        <legend>Image upload</legend>
        <p>Pick up an image to upload, and press "upload" </p>
        <form name="form2" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="image" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset class="left">
        <legend>XMLHttpRequest upload</legend>
        <p>Pick up one file to upload, and press "upload" </p>
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" id="xhr_field" /></p>
            <div id="xhr_status"></div>
            <p class="button"><input type="hidden" name="action" value="xhr" />
            <input type="submit" name="Submit" value="upload" id="xhr_upload"/></p>
        </form>
        <div id="xhr_result"></div>
    </fieldset>

    <fieldset class="right">
        <legend>HTML5 File Drag &amp; Drop API</legend>
        <p>Drag and drop one file to upload, and press "upload" </p>
        <form name="form5" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="file" size="32" name="my_field" value="" id="dnd_field" /></p>
            <div id="dnd_drag">... drag and drop here ...</div>
            <div id="dnd_status"></div>
            <p class="button"><input type="hidden" name="action" value="xhr" />
            <input type="submit" name="Submit" value="upload" id="dnd_upload"/></p>
        </form>
        <div id="dnd_result"></div>
    </fieldset>

    <fieldset class="left">
        <legend>Multiple upload</legend>
        <p>Pick up some files to upload, and press "upload" </p>
        <form name="form3" enctype="multipart/form-data" method="post" action="upload.php">
            <p><input type="file" size="32" name="my_field[]" value="" /></p>
            <p><input type="file" size="32" name="my_field[]" value="" /></p>
            <p><input type="file" size="32" name="my_field[]" value="" /></p>
            <p class="button"><input type="hidden" name="action" value="multiple" />
            <input type="submit" name="Submit" value="upload" /></p>
        </form>
    </fieldset>

    <fieldset class="right">
        <legend>Image local manipulation</legend>
        <p>Enter a local file name (absolute or relative) for a small image, and press "process" </p>
        <form name="form4" enctype="multipart/form-data" method="post" action="upload.php" />
            <p><input type="text" size="32" name="my_field" value="test.png" /></p>
            <p class="button"><input type="hidden" name="action" value="local" />
            <input type="submit" name="Submit" value="process" /></p>
        </form>
    </fieldset>


    <script type="text/javascript">

    window.onload = function () {

      function xhr_send(f, e) {
        if (f) {
          xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
              document.getElementById(e).innerHTML = xhr.responseText;
            }
          }
          xhr.open("POST", "upload.php?action=xhr");
          xhr.setRequestHeader("Cache-Control", "no-cache");
          xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
          xhr.setRequestHeader("X-File-Name", f.name);
          xhr.send(f);
        }
      }

      function xhr_parse(f, e) {
        if (f) {
          document.getElementById(e).innerHTML = "File selected : " + f.name + "(" + f.type + ", " + f.size + ")";
        } else {
          document.getElementById(e).innerHTML = "No file selected!";
        }
      }

      function dnd_hover(e) {
        e.stopPropagation();
        e.preventDefault();
        e.target.className = (e.type == "dragover" ? "hover" : "");  
      }

      var xhr = new XMLHttpRequest();

      if (xhr && window.File && window.FileList) {

        // xhr example
        var xhr_file = null;
        document.getElementById("xhr_field").onchange = function () {
          xhr_file = this.files[0];
          xhr_parse(xhr_file, "xhr_status");
        }
        document.getElementById("xhr_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(xhr_file, "xhr_result");
        }

        // drag and drop example
        var dnd_file = null; 
        document.getElementById("dnd_drag").style.display = "block";
        document.getElementById("dnd_field").style.display = "none";
        document.getElementById("dnd_drag").ondragover = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondragleave = function (e) {
          dnd_hover(e);
        }
        document.getElementById("dnd_drag").ondrop = function (e) {
          dnd_hover(e);
          var files = e.target.files || e.dataTransfer.files;
          dnd_file = files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_field").onchange = function (e) {
          dnd_file = this.files[0];
          xhr_parse(dnd_file, "dnd_status");
        }
        document.getElementById("dnd_upload").onclick = function (e) {
          e.preventDefault();
          xhr_send(dnd_file, "dnd_result");
        }

      }
    }
    </script>

</body>

</html>
